<template>
  <a-modal destroyOnClose v-model:open="visible" :span="24" :title="title" :width="720">
    <vxe-form ref="vxeFormRef" :data="formData" :items="formItems" :rules="formRules" :title-width="126">
      <template #name="scope">
        <a-input
          v-model:value="scope.data.name"
          @change="() => onUpdateVxeFormItemStatus(scope)"
          placeholder="请输入..."
        ></a-input>
      </template>
      <template #method="scope">
        <a-select
          class="w-full"
          v-model:value="scope.data.method"
          :options="methodOptions"
          @change="() => onUpdateVxeFormItemStatus(scope)"
        ></a-select>
      </template>
      <template #uri="scope">
        <a-input
          v-model:value="scope.data.uri"
          @change="() => onUpdateVxeFormItemStatus(scope)"
          placeholder="必须以 / 开头..."
        ></a-input>
      </template>
      <template #title-slot="scope">
        uri
        <a-popover title="uri 支持的路径表达式" trigger="hover">
          <template #content>
            <p>如: /:id</p>
            <p>如: /:id/abc</p>
            <p>如: /test/:name/test</p>
            <p>如: /test/:name/:projectId/test</p>
          </template>
          <QuestionCircleOutlined />
        </a-popover>
      </template>
      <template #enable="scope">
        <a-switch
          :checkedValue="1"
          :unCheckedValue="0"
          v-model:checked="scope.data.enable"
          checked-children="启用"
          un-checked-children="禁用"
        />
      </template>
    </vxe-form>

    <template #footer>
      <a-button key="back" @click="onCancel">取消</a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="onOk">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import type { VxeFormPropTypes, VxeFormInstance } from 'vxe-table'
import type { SelectProps } from 'ant-design-vue'
import { add, modify } from '@render/service/FrontApiService'
import { useAddModalHook } from '@render/hooks/AddEditModalHooks'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'

const $emits = defineEmits<{
  saveSuc: []
  editSuc: [val: ApiInfo]
}>()
const defaultFormData = {
  id: undefined,
  projectId: null,
  name: '',
  method: 'POST',
  uri: '',
  enable: 1,
}

const { vxeFormRef, visible, loading, formData, title, onCancel, onOk, onUpdateVxeFormItemStatus, onOpenModal } =
  useAddModalHook<ApiInfo>(defaultFormData, modify, add, $emits)

const methodOptions = ref<SelectProps['options']>([
  {
    value: 'GET',
    label: 'GET',
  },
  {
    value: 'POST',
    label: 'POST',
  },
  {
    value: 'PUT',
    label: 'PUT',
  },
  {
    value: 'DELETE',
    label: 'DELETE',
  },
])
const formItems = ref<VxeFormPropTypes.Items>([
  { field: 'name', title: '接口名', span: 24, itemRender: {}, slots: { default: 'name' } },
  { field: 'method', title: '请求方式', span: 24, itemRender: {}, slots: { default: 'method' } },
  { field: 'uri', title: '接口URI', span: 24, itemRender: {}, slots: { default: 'uri', title: 'title-slot' } },
  { field: 'enable', title: '启用', span: 24, itemRender: {}, slots: { default: 'enable' } },
])
const formRules = ref<VxeFormPropTypes.Rules>({
  name: [{ required: true, message: '该项必填' }],
  method: [{ required: true, message: '该项必填' }],
  uri: [
    { required: true, message: '该项必填' },
    { pattern: /^\/.*$/, message: '必须以 / 号开头' },
  ],
  enable: [{ required: true, message: '该项必填' }],
})

function openModal(_title: string, projectId: number, initData?: ApiInfo) {
  onOpenModal(_title, initData)
  formData.value.projectId = projectId
}

defineExpose({ openModal })
</script>

<style scoped></style>
